<template>
  <div class="forget">
    <router-link :to="{path:'/sign'}" style='color: #000;'>
      <div class="back">
        <i class="material-icons left_1" style="color: #fff;margin-left: .5rem;">chevron_left</i>
      </div>
    </router-link>

    <div class="account">
      <div class="account-c">
        <div class="shouji">
          <div class="ic">+86</div><input placeholder="请输入手机号" type="tel" v-model="mobile">
          <button class="code" @click="getcode()" :disabled="show">
            <span>获取验证码</span>
            <span v-show="show" class="count">{{count}} s</span>
          </button>
        </div>
        <div class="yanzhengma">
          <div class="ic">验证码</div><input placeholder="请填写收到的验证码" type="password" v-model="code">
        </div>
        <div class="mima">
          <div class="ic">新密码</div><input placeholder="组合字母、数字或符号" type="password" v-model="password">
        </div>
        <div class="xinmima">
          <div class="ic">确认密码</div><input placeholder="再次输入新密码" type="password" v-model="refPassword">
        </div>
      </div>
    </div>

    <div class="btn">
      <div class="btn-c">
        <img src="../assets/btn.png" @click="sign" />
      </div>
    </div>

  </div>
</template>

<script>

import { MessageBox } from 'mint-ui'
import { com } from '@service'
import validate from '@utils/validate'

export default {
  name: 'Forget',
  data () {
    return {
      count: 60,
      mobile: '',
      code: '',
      password: '',
      refPassword: '',
      show: false
    }
  },
  methods: {
    async sign () {
      if (!validate.isTel(this.mobile)) {
        MessageBox.alert('请输入手机号')
        return
      }
      if (!this.code) {
        MessageBox.alert('请输入验证码')
        return
      }
      if (!this.password) {
        MessageBox.alert('请输入新密码')
        return
      }
      if (!validate.validatPassword(this.password)) {
        MessageBox.alert('密码中必须包含字母、数字、特称字符，至少6个字符')
        return
      }
      if (!this.refPassword) {
        MessageBox.alert('请确认密码')
        return
      }
      if (this.password !== this.refPassword) {
        MessageBox.alert('两次输入密码不一致')
        return
      }

      try {
        let mobile = this.mobile
        let code = this.code
        let password = this.password
        let refPassword = this.refPassword
        let data = await com.resetPassword({mobile, code, password, refPassword})
        console.log(data)

        MessageBox.alert('密码重置成功').then((aciton) => {
          var router = this.$router
          router.push('sign')
        })
      } catch (error) {
        MessageBox.alert(error.info || error)
      }
    },
    async getcode () {
      let secret = 'PysmsSecret20170723'
      let sendType = 3
      let mobile = this.mobile

      if (!validate.isTel(this.mobile)) {
        MessageBox.alert('请输入手机号')
        return
      }

      if (!this.timer && mobile) {
        try {
          await com.smsAuthCode({ mobile, secret, sendType })
          // countdown
          this.show = true
          this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= this.count) {
              this.count--
            } else {
              this.count = 60
              clearInterval(this.timer)
              this.timer = null
              this.show = false
            }
          }, 1000)
        } catch (error) {
          console.log(error)
          MessageBox.alert(error.info || error.message)
        }
      }
    },
    reset () {
      this.count = 60
      this.mobile = ''
      this.code = ''
      this.password = ''
      this.refPassword = ''
      this.show = true
    }
  },
  beforeRouteLeave (to, from, next) {
    console.log('destroy===')
    this.reset()
    next()
  }
}
</script>

<style lang="scss" scoped>
.back {
  margin-top: 1.5rem;
}
.forget {
  background-image: url(../assets/forgetb.png);
  width: 100%;
  height: 100%;
  background-size: cover;
  overflow: hidden;
}
.code {
  width: 5rem;
  height: 2rem;
  background: #8bc34a;
  color: #fff;
  border-style: none;
  border-radius: 5px;
  font-size: 0.8rem !important;
  float: right;
  width: 30%;
  margin-top: 0.4rem;
}
.btn-c img {
  width: 100%;
  height: 3.5rem;
  border: none;
  color: #fff;
  margin-top: 7.5rem;
}
.btn-c {
  padding-left: 2rem;
  padding-right: 2rem;
}

.account {
  background: #fff;
  border-radius: 6px;
  margin-top: 10rem;
  min-height: 11.5rem;
  padding-left: 2rem;
  padding-right: 2rem;
}
.account-c {
  padding-left: 1rem;
  padding-right: 1rem;
  height: 12rem;
  border-radius: 6px;
  box-shadow: 0px 3px 12px 2px #eee;
}
.shouji input {
  width: 45%;
  height: 2.4rem;
  line-height: 2.8rem;
  border: none;
  color: #606063;
  margin-top: 0.2rem;
}

.mima input {
  border: none;
  height: 2.4rem;
  line-height: 2.8rem;
  color: #606063;
  width: 75%;
  margin-top: 0.2rem;
}
.ic {
  width: 25%;
  line-height: 2.8rem;
  float: left;
}
.yanzhengma input {
  border: none;
  height: 2.4rem;
  line-height: 2.8rem;
  color: #606063;
  width: 75%;
  margin-top: 0.2rem;
}
.xinmima input {
  border: none;
  height: 2.4rem;
  line-height: 2.8rem;
  color: #606063;
  float: left;
  width: 75%;
  margin-top: 0.2rem;
}
.shouji {
  border-bottom: 1px solid #f5f5f5;
  height: 2.8rem;
  width: 100%;
  float: left;
}
.yanzhengma {
  border-bottom: 1px solid #f5f5f5;
  height: 2.8rem;
  width: 100%;
  float: left;
}
.mima {
  border-bottom: 1px solid #f5f5f5;
  height: 2.8rem;
  width: 100%;
  float: left;
}
</style>
